<template>
	<div class="login">
		<div class="restaurant-name">咚咚哒哒美食店</div>
		<div class="container">
			<div class="login-tab">
				<div>
					<a href="javascript:void(0)">账户登录</a>
				</div>
				<div>
					<a href="javascript:void(0)">扫码登录</a>
				</div>
			</div>
			<div class="login-content">
				<div>
					<div class="item">
						<div>
							<label class="fm-label-icon"><i class="iconfont iconzhanghaodenglu" style="font-size: 24px;"></i></label>
						</div>
						<div>
							<input class="fm-text fm-text-usercode" type="text" v-model="user_msg" />
						</div>
					</div>
					<div class="item">
						<div>
							<label class="fm-label-icon"><i class="iconfont iconmima1" style="font-size: 24px;"></i></label>
						</div>
						<div>
							<input class="fm-text fm-text-password" type="password" v-model="user_pwd" />
						</div>
					</div>
				</div>
				<div class="login-btn" @click="login">
					<span>登&nbsp;录</span>
				</div>
				<div class="login-link">
					<a href="">忘记密码</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import LoginService from './LoginService.js'
	import Vue from 'vue';
	export default {
		name: "login",
		data() {
			return {
				user_msg: '',
				user_pwd: '',
			}
		},
		methods: {
			login() {
				Vue.axios.get(`http://localhost:8080/user/login`, {
					params: {
						user_msg: this.user_msg,
						user_pwd: this.user_pwd
					}
				}).then(
					r => {
						if (r.data.isLogin) {
							this.$store.commit('changeLogin', true);
							this.$router.push({
								name: 'Home'
							});
						} else {
							alert("账号或密码错误");
						}
					}
				)
			}
		}
	}
</script>

<style scoped lang="less">
	@import '../../assets/font/font-1.css';
	.restaurant-name {
		position: relative;
		left: 60px;
		font-family: "font-1";
		font-size: 80px;
		width: 600px;
		color: #ffa63c;
	}

	.login {
		background: url(../../assets/loginBack.png) 0px 0px no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.container {
		position: relative;
		left: 23%;
		width: 380px;
		height: 380px;
		background-color: rgba(255, 255, 255, 0.5) !important;
	}

	.login-tab {
		border-bottom: 1px solid #f4f4f4;
		height: 54px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		div:nth-child(1) {
			width: 50%;
			border-right: 1px solid #f4f4f4;
			text-align: center;
		}

		div:nth-child(2) {
			width: 50%;
			text-align: center;
		}

		a {
			text-decoration: none;
			color: #666;
			font-family: "Helvetica Neue";
			font-size: 18px;
		}
	}

	.login-content {
		padding: 20px;
	}

	.item {
		display: flex;
		margin-top: 20px;
		margin-bottom: 30px;
		height: 40px;
		width: 338px;
		// border: 1px solid #bdbdbd;
		position: relative;

		.fm-label-icon {
			position: absolute;
			text-align: center;
			width: 40px;
			height: 40px;
			line-height: 40px;
			// border-right: 1px solid #bdbdbd;
			background-color: #ccc;
		}

		.fm-text {
			position: absolute;
			left: 40px;
			height: 18px;
			padding: 10px 0;
			line-height: 38px;
			width: 290px;
			padding-left: 10px;
			outline: none;
			font-size: 15px;
			border: 1px solid #ccc;
		}

		.fm-text-usercode {
			letter-spacing: 0.5px;
		}

		.fm-text-password {
			letter-spacing: 1px;
		}
	}

	.login-btn {
		width: 318px;
		height: 26px;
		margin-top: 40px;
		padding: 10px;
		border: 1px solid gray;
		background: #e4393c;
		line-height: 26px;
		text-align: center;
		font-size: 20px;
		color: #fff;
		cursor: pointer;
	}

	.login-link {
		text-align: right;
		margin-top: 40px;

		>a {
			text-decoration: none;
			color: #666;
			font-family: "Helvetica Neue";
			margin-left: 15px;
		}
	}
</style>
